<!-- query 查询 -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>simple</title>
</head>

<body>
    <div class="abc">
        <div id="xx" align="center">xx</div>
        <div id="yy">yy</div>
        <div class="aa">aa</div>
        <div class="bb">bb</div>
        <button class="aa" type="submit">aaa</button>
        <button class="aa" type="reset">aaaxx</button>
        <button class="bb">bbb</button>

        <!-- <li class="li"></li> -->
    </div>

    <style>
        button.aa[type="submit"] {
            /* background-color: brown; */
        }
        *[type]{
            background-color: chartreuse;
        }
    </style>
    <script>

        let xx = document.getElementById("xx");
        let yy = document.querySelector("#yy");


        // 必定查询多个 Array 类数组对象 HtmlCollection
        let aa = document.getElementsByClassName("aa");
        // let li = document.getElementsByTagName("li");

        // 必定查询一个 Node类型
        let bb = document.querySelector(".bb");

        // let lii = document.querySelector("li");
        // 通过query和get 返回的单个值一定是Node类型
        // Node类型 Element标签类型 元素类型 最常用 90%比重
        // 必定查询多个 Array 类数组对象 NodeList
        let bbb = document.querySelectorAll(".bb")
        for (let i = 0; i < bbb.length; i++) {
            console.log(bbb[i])
        }
        let dd = document.querySelector("button.aa[type='submit']");
        dd.style.opacity = "0.4";

        // 

        // const tooltipTriggerList = 
        // document.querySelectorAll('[data-bs-toggle="tooltip"]')


    </script>
</body>

</html>